import { CloseButtonDemos } from '@docs/demos';
import { Layout } from '@/layout';
import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.CloseButton);

## Usage

`CloseButton` renders a button with `X` icon inside. It is used in other Mantine components like [Drawer](/core/drawer) or [Modal](/core/modal).

<Demo data={CloseButtonDemos.usage} />

## Change icon

You can change icon by passing any react node to the `icon` prop.
It is useful when `CloseButton` is used as a part of other components,
for example, in [Drawer](/core/drawer) or [Modal](/core/modal).
Note that if you use `icon` prop, `iconSize` prop is ignored –
you will have to set icon size manually.

<Demo data={CloseButtonDemos.icon} />

## Accessibility

To make `CloseButton` accessible for screen readers, you need to either set `aria-label` or
use [VisuallyHidden](/core/visually-hidden) component:

```tsx
import { CloseButton, VisuallyHidden } from '@mantine/core';

function Demo() {
  return (
    <>
      <CloseButton aria-label="Close modal" />

      <CloseButton>
        <VisuallyHidden>Close modal</VisuallyHidden>
      </CloseButton>
    </>
  );
}
```
